微信小程序实现打卡功能 |
您所在的位置：网站首页 › 微信小程序 小打卡 › 微信小程序实现打卡功能 |
微信小程序实现打卡功能
|
前言
因业务需求微信小程序使用wx.getLocation和腾讯地图联合实现打卡功能，并且记录一下 需要满足以下条件 一个已开通 wx.getLocation接口权限的微信小程序 注册一个腾讯地图开放平台，并创建一个key 申请key申请 wxgetLocation 接口权限时，可事先将前端页面静态页面实现截图上传辅助审核更容易通过 可以点击前面的 申请key 链接进入页面下载相应的包，并在页面中引入 /* 根据自己实际业务，随意放置位置*/ var QQMapWX = require("../../utils/qqmap-wx-jssdk/qqmap-wx-jssdk") var qqmapwx; Page({ data:{ targetLocation:[0,0] }, onLoad(){ qqmapwx = new QQMapWX({ key: "申请的key" }) qqmapwx.geocoder({ address: "北京天安门", success: function (res) { _this.setData({ targetLocation: res.result.location }) } }) } })wxml代码 前面通过 qqmapwx.geocoder({address:'北京天安门'}) 获取到了北京天安门的坐标，我们就以天安门的坐标为打卡点 定义一个创建地图标记的方法 /*------------------------util.js---------------------------------*/ function randId(len = 32) { let date = (new Date()).valueOf() console.log(date) let txt = '1234567890qwertyuioplkjhgfdsazxcvbnm' let pwd = '' for (let index = 0; index < len; index++) { pwd += txt.charAt(Math.floor(Math.random() * txt.length)) } return pwd } /*---------------------------------------------------------*/ const { randId } = require("../../utils/util") var QQMapWX = require("../../utils/qqmap-wx-jssdk/qqmap-wx-jssdk") var qqmapwx; let marker = [] // 在Page()前面定义一个变量用了存储标记点，在后面还要在存一个用户当前所在位置的点 Page({ data: { targetLocation: [0, 0] }, onLoad() { qqmapwx = new QQMapWX({ key: "申请的key" }) qqmapwx.geocoder({ address: "北京天安门", success: function (res) { _this.setData({ targetLocation: res.result.location }) _this.addMark(res.result.location.lng, res.result.location.lat, "北京天安门") } }) }, addMark(lng, lat, name) { marker.push({ id: randId(), //标记点 id width: 50, height: 50, longitude: lng, latitude: lat, label: { content: name, color: '#f00', textAlign: "center", fontSize: 12 }, callout: { content: '气泡', color: "#f00", fontSize: 30 }, }) this.setData({ markers: marker }) } })wxml代码 获取用户当前位置信息使用wx.getLocation() 注意：wx.getLocation 并不能直接使用，需要申请权限，并且在app.json里面配置 { "pages":[ "pages/index/index" ], "requiredPrivateInfos": [ "getLocation" ], "permission": { "scope.userLocation": { "desc": "获取位置信息弹框询问信息" } }, }wx.getLocation详细介绍 微信开发工具的定位是采用的 IP定位，存在误差并且只支持 gcj02 data:{ targetLocation:[0,0] userInfo:{ location:[0,0], } }, getUserLocation() { const _this = this wx.getLocation({ type: 'gcj02', // 腾讯地图的坐标系采用的gcj02 success: function (res) { console.log(res) _this.setData({ ["userInfo.location"]: [res.latitude, res.longitude] }) } }) }, 使用 qqmapwx.reverseGeocoder 将获取到的坐标转换为中文地址信息 ，并在地图上标记reverseGeocoder相关介绍 getUserLocation() { const _this = this wx.getLocation({ type: 'gcj02', // 腾讯地图的坐标系采用的gcj02 success: function (res) { console.log(res) _this.setData({ ["userInfo.location"]: [res.latitude, res.longitude] }) _this.addMark(res.longitude, res.latitude, "我") // 标记 qqmapwx.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success(resp) { _this.setData({ ["userInfo.address"]: resp.result.address, }) } }) } }) }, wxml代码 纬度：{{userInfo.location[0]}} ,经度：{{userInfo.location[1]}} 当前位置：{{userInfo.address}}页面简单的调整 wxml 距离：{{userInfo.dis}}米 {{userInfo.jl |
【本文地址】
今日新闻 |
推荐新闻 |